<template>
   <div>
    <div style="padding: 20px;">
        <!-- 搜索表单 -->
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="负责人" style="width: 200px;">
            <el-select
                v-model="searchForm.ownerId"
                placeholder="请选择负责人"
                clearable
            >
                <el-option
                    v-for="owner in owners"
                    :key="owner.id"
                    :label="owner.name"
                    :value="owner.id"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="活动名称">
            <el-input v-model="searchForm.name" placeholder="请输入活动名称" clearable />
        </el-form-item>
        <el-form-item label="开始时间">
            <el-date-picker
                v-model="searchForm.startTime"
                type="date"
                placeholder="请选择开始时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                clearable
            />
        </el-form-item>
        <el-form-item label="结束时间">
            <el-date-picker
                v-model="searchForm.endTime"
                type="date"
                placeholder="请选择结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                clearable
            />
        </el-form-item>
        <el-form-item label="活动预算">
            <el-input v-model.number="searchForm.cost" placeholder="请输入活动预算" clearable />
        </el-form-item>
        <el-form-item label="创建时间">
            <el-date-picker
                v-model="searchForm.createTime"
                type="date"
                placeholder="请选择创建时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                clearable
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search(1)">搜索</el-button>
            <el-button type="primary" plain @click="resetSearchForm">重置</el-button>
        </el-form-item>
        </el-form>
        <div style="margin-bottom: 10px;">
            <el-button type="primary" @click="addActivity" v-checkButton="'activity:add'">录入市场活动</el-button>
            <el-button type="danger" @click="batchDeleteByIds" v-checkButton="'activity:delete'">批量删除</el-button>
        </div>
        <el-table 
            :data="acvityList" 
            style="width: 100%" 
            border
            table-layout="auto"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection"/>
            <el-table-column prop="id" label="序号"  />
            <el-table-column prop="ownerName" label="负责人" />
            <el-table-column prop="name" label="活动名称"  />
            <el-table-column prop="startTime" label="开始时间" />
            <el-table-column prop="endTime" label="结束时间" />
            <el-table-column prop="cost" label="活动预算" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作" >
                <template #default="scope">
                    <el-button type="primary" plain @click="router.push(`/dashboard/activity/detail/${scope.row.id}`)"  v-checkButton="'activity:view'">
                        详情
                    </el-button>
                    <el-button  type="success"  plain @click="router.push(`/dashboard/activity/edit/${scope.row.id}`)"  v-checkButton="'activity:edit'">
                        编辑
                    </el-button>
                    <el-button  type="danger"  plain @click="deleteActivity(scope.row.id)"  v-checkButton="'activity:delete'">
                        删除
                    </el-button>
                </template>
            </el-table-column> 
        </el-table>
        <!-- 分页 -->
        <div style="margin-top: 20px;">
            <el-pagination 
                background 
                layout="prev, pager, next" 
                :total="page.total"
                :page-size="page.pageSize"
                @current-change="currentChange" 
            />
        </div>
   </div>
   </div>
</template>
<script lang="ts" setup name="Activity">
import { baseService } from '@/utils/httpReqest';
import { onMounted, ref, reactive } from 'vue';
import Activity from '@/hooks/activity';
import { ElMessage ,ElMessageBox} from 'element-plus';
import router from '@/router';
let acvityList = ref<Activity[]>([]);
let owners = ref<any[]>([])
let selectIds: any[] = [];
let page = reactive({
    pageSize: 8, //单页记录数
    total: 0,
    currentPage: 1,
})
let searchForm = reactive({
    ownerId:'',
    name:"",
    startTime:'',
    endTime:"",
    cost:'',
    createTime:""
})
let resetSearchForm = () => {
    for (const key in searchForm) {
        searchForm[key as keyof typeof searchForm] = ''; 
    }
}
let currentChange = (number: number) => {
    page.currentPage = number;
    search(number);
}
   


let search = (currentPage = 1) => {
    baseService.doGet("/activity/searchList",{
        currentPage:currentPage,
        pageSize:8,
        ownerId:searchForm.ownerId,
        name:searchForm.name,
        startTime:searchForm.startTime,
        endTime:searchForm.endTime,
        cost:searchForm.cost,
        createTime:searchForm.createTime
    }).then((res:any) => {
        if (res.code == 200) {
            acvityList.value = res.data.data
            page.total = res.data.total;
        } else{
            ElMessage.error("获取活动列表失败")
        }
    })
}
let getAllOwnerNames = () => {
    baseService.doGet("/user/getAllNames").then((res:any) => {
        if(res.code == 200){
            owners.value = res.data
        }else{
            ElMessage.error("获取用户用户名字列表出现错误")
        }
    })
}
onMounted(() => {
    search(1);
    getAllOwnerNames();
})

let addActivity = () => {
    router.push("/dashboard/activity/add")
}
// 多选发生变化  
let handleSelectionChange = (activityArray: any[]) => {
    selectIds = []
    activityArray.forEach((user) => {
        selectIds.push(user.id)
    })
}
let batchDeleteByIds = () => {
    ElMessageBox.confirm(
        '确定删除吗？',
        '批量删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        if (selectIds.length < 1) {
            ElMessage.error("请选择活动")
        } else {
            baseService.doPost("/activity/batchDeleteUserByIds", selectIds)
                .then((res: any) => {
                    if (res.code == 200) {
                        ElMessage.success("删除成功")
                        search(page.currentPage)
                    } else {
                        ElMessage.error(res.msg)
                    }
                })
        }
    })
}
let deleteActivity = (id:number) => {
    selectIds = [id]
    console.log(selectIds);
    batchDeleteByIds();
}
</script>
<style scoped>

</style>